<template>
	<view class="news">
		<navbar title="更多资讯"></navbar>
		
		<view class="list bgwhite mt30 px30">
			<block v-for="(item,index) in articlelist" :key="index">
				<view class="item acea-row" @click="detailclick(item)">
					<view class="pic">
						<image class="imgwh" :src="item.image_input[0]" mode=""></image>
					</view>
					<view class="ml20" style="width: 500rpx;">
						<view class="line2 fs32 bold fc333" style="min-height: 80rpx;">{{ item.title }}</view>
						<view class="acea-row row-right">
							<view class="see fs24 acea-row row-middle row-center">点击查看</view>
						</view>
					</view>
				</view>
			</block>
			<view class='loadingicon acea-row row-center-wrapper fs26'>
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import{
		getarticle
	} from '@/api/api.js'
	import navbar from '../../components/navbar.vue';
	export default {
		components:{
			navbar
		},
		data() {
			return {
				loadend: false,
				loading: false,
				loadTitle: this.$t(`加载更多`),
				page:1,
				limit:10,
				articlelist:[],
				
			};
		},
		onShow(){
			this.clearArticle();
			this.getArticle();
		},
		methods:{
			clearArticle(){
				this.articlelist = [];
				this.loadend = false;
				this.loading = false;
				this.page = 1;
			},
			getArticle(){
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				getarticle({ page:that.page, limit:that.limit }).then(res=>{
					let list = res.data;
					let articlelist = that.$util.SplitArray(list, that.articlelist);
					let loadend = list.length < that.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
					that.$set(that, 'articlelist', articlelist);
					that.$set(that, 'page', that.page + 1);
				}).catch(err=>{
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			},
			detailclick(item){
				uni.navigateTo({
					url:`/pages/home/news-details?id=${item.id}`
				})
			}
		},
		onReachBottom(){
			this.getArticle();
		}
	}
</script>

<style lang="scss">
	.news{
		
		.list{
			
			.item{
				width: 100%;
				border-bottom: 1rpx solid #D8D8D8;
				padding: 30rpx 10rpx;
				
				.pic{
					width: 144rpx;
					height: 144rpx;
				}
				
				.see{
					width: 200rpx;
					height: 56rpx;
					border-radius: 28rpx;
					background: rgba(98, 82, 223, 0.1);
					color: #6252DF;
				}
			}
			
		}
		
		
	}
</style>
